<template>
  <div class="filters-container">
    <el-form
      ref="filterForm"
      :inline="true"
      :model="queryParams"
      :rules="formRules"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="20"
        style="width:100%;margin-left: 0px; margin-right: 0px;"
      >
        <el-col
          :xs="5"
          :lg="6"
          style="max-width: 50%;padding-left:0px"
        >
          <el-form-item
            label="代理名称"
            style="width:100%"
            prop="customerId"
          >
            <el-select
              v-model="queryParams.customerId"
              style="width: 100%"
              placeholder="输入代理名称选择"
              filterable
              remote
              reserve-keyword
              :remote-method="customerQuerySearch"
              :loading="customerLoading"
              @change="handlSearch"
            >
              <el-option
                key="全部"
                label="全部"
                :value="0"
              />
              <el-option
                v-for="(item, idx) in customerOption"
                :key="item.id"
                :label="item.customerName"
                :value="item.customerId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :xs="5"
          :lg="6"
          style="min-width:395px;max-width: 50%"
        >
          <el-form-item
            label="累计应收"
            style="width:100%"
          >
            <div style="display:flex;">
              <el-form-item
                style="margin:0px"
                prop="minAmount"
              >
                <el-input
                  v-model="queryParams.minAmount"
                  placeholder="输入最小金额"
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                />
              </el-form-item>
              <span style="padding: 0px 4px;color: #666">-</span>
              <el-form-item
                style="margin:0px"
                prop="maxAmount"
              >
                <el-input
                  v-model="queryParams.maxAmount"
                  placeholder="输入最大金额"
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                />
              </el-form-item>
            </div>
          </el-form-item>
        </el-col>
        <el-col
          :xs="2"
          :lg="3"
          style="max-width: 140px"
        >
          <el-form-item style="width:140px">
            <el-button
              class="border-btn"
              @click="handlReset"
            >重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
              @click="handlSearch"
            >搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <table-view
    header-cell-class-name="table-header"
    :data="tableData"
    border
    :cell-style="cellStyle"
    @row-click="aloneClick"
  >
    <el-table-column
      label="代理编号"
      prop="customerNumber"
      header-align="center"
      align="center"
      fixed="left"
      :width="160"
      show-overflow-tooltip
    />
    <el-table-column
      label="代理名称"
      prop="customerName"
      header-align="center"
      fixed="left"
      :min-width="160"
      show-overflow-tooltip
    />
    <el-table-column
      label="累计营销额(元)"
      prop="sumSellAmount"
      header-align="center"
      align="right"
      :width="160"
    >
      <template #header>
        <div style="display:flex;justify-content:center;align-items:center;">
          <span style="margin-right:4px">累计营销额(元)</span>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="累计营销额为交易价计算的营销金额"
            placement="top"
          >
            <i class="iconfont icon-wenhao main-color" />
          </el-tooltip>
        </div>
      </template>
      <template #default="scope">
        <span>{{ moneyFormat(scope.row.sumSellAmount) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="已回款金额(元)"
      header-align="center"
      prop="sumReturnAmount"
      align="right"
      :width="150"
      show-overflow-tooltip
    >
      <template #default="scope">
        <span>{{ moneyFormat(scope.row.sumReturnAmount) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="剩余应收(元)"
      header-align="center"
      prop="sumSaleAmount"
      align="right"
      :width="150"
    >
      <template #default="scope">
        <span>{{ moneyFormat(scope.row.sumSellAmount-scope.row.sumReturnAmount) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="应收最大额度(元)"
      prop="quota"
      header-align="center"
      align="right"
      :width="150"
      show-overflow-tooltip
    >
      <template #default="scope">
        <span v-if="scope.row.quota>0">{{ moneyFormat(scope.row.quota) }}</span>
        <span v-else>不限额</span>
      </template>
    </el-table-column>
    <el-table-column
      label="最后一次营销日期"
      prop="lastSellTime"
      header-align="center"
      align="center"
      :width="150"
    >
      <template #default="scope">
        <span>{{ dateFormat('yyyy-mm-dd', scope.row.lastSellTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="最后一次回款日期"
      prop="lastRecordTime"
      header-align="center"
      align="center"
      :width="150"
    >
      <template #default="scope">
        <span>{{ dateFormat('yyyy-mm-dd', scope.row.lastRecordTime) }}</span>
      </template>
    </el-table-column>
  </table-view>
  <Pagination
    v-model:page="queryParams.page"
    v-model:limit="queryParams.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="handlList"
  />
</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'Receivable',
  setup() {
    const api = inject('api')
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    const minAmountPass = (rule, value, callback) => {
      if (value) {
        data.queryParams.minAmount = Number(value)
        if (data.queryParams.maxAmount) {
          if (data.queryParams.minAmount <= data.queryParams.maxAmount) {
            callback()
          } else {
            callback(new Error('最小金额不能大于最大金额'))
          }
        } else {
          callback()
        }
      } else {
        if (Number(value) === 0) {
          data.queryParams.minAmount = 0
          callback()
        } else {
          data.queryParams.minAmount = undefined
          callback()
        }
      }
    }
    const maxAmountPass = (rule, value, callback) => {
      if (value) {
        data.queryParams.maxAmount = Number(value)
        if (data.queryParams.minAmount) {
          if (data.queryParams.minAmount <= data.queryParams.maxAmount) {
            callback()
          } else {
            callback(new Error('最大金额不能小于最小金额'))
          }
        } else {
          callback()
        }
      } else {
        if (Number(value) === 0) {
          data.queryParams.maxAmount = 0
          callback()
        } else {
          data.queryParams.maxAmount = undefined
          callback()
        }
      }
    }
    // 搜索对象
    var data = reactive({
      filterForm: null,
      queryParams: {
        customerType: 'agent',
        customerId: 0,
        customerName: '',
        minAmount: undefined,
        maxAmount: undefined,
        pageSize: 20,
        page: 1,
      },
      tableData: [],
      total: 0,
      customerLoading: false,
      customerOption: [],
      formRules: {
        minAmount: [
          { required: false, trigger: 'blur', validator: minAmountPass },
        ],
        maxAmount: [
          { required: false, trigger: 'blur', validator: maxAmountPass },
        ],
      },
    })

    // 获取列表
    const handlList = () => {
      api.returnedAndReceivable
        .RECEIVABLE_LIST(data.queryParams)
        .then((res) => {
          if (res.code === 0) {
            data.tableData = res.data.list || []
            data.total = res.data.total
          }
        })
    }

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1
      handlList()
    }

    // 重置
    const handlReset = () => {
      data.queryParams = {
        customerType: 'agent',
        customerId: 0,
        customerName: '',
        minAmount: undefined,
        maxAmount: undefined,
        pageSize: 20,
        page: 1,
      }
      handlList()
    }

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === '操作') return
      router.push({
        name: 'receivableDetail',
        query: {
          id: row.id,
          customerType: row.customerType,
          customerId: row.customerId,
          customerName: row.customerName,
        },
      })
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    const customerQuerySearch = async(queryString, cb) => {
      data.customerLoading = true
      const a = {
        customerType: data.queryParams.customerType,
        keyWord: queryString,
        financeType: 'direct',
      }
      let results = []
      const res = await api.returnedAndReceivable.CUSTOMER_LIST_BY_TYPE(a)
      if (res.code === 0) {
        data.customerLoading = false
        results = res.data.list || []
        data.customerOption = results
      }
    }

    onMounted(() => {
      handlList()
    })

    return {
      ...toRefs(data),
      handlList,
      handlSearch,
      handlReset,
      aloneClick,
      cellStyle,
      customerQuerySearch,
    }
  },
}
</script>

<style lang="scss" scoped>
/* @import url(); 引入css类 */
.receivable-container {
  :deep(.el-radio) {
    &.is-bordered.el-radio--small {
      .el-radio__label {
        line-height: 12px;
      }
    }
  }
}
</style>
